<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <style>
        input.error {
            border: 1px solid #E6594E;
        }
        </style>
</head>
<body>
<section id="container">
  <#--  <#include "sider.ftl">  &lt;#&ndash;引入头部和导航栏&ndash;&gt;-->
        <form id="editUserForm" style="padding: 60px; width: 90%;">
                <input type="hidden" name="suId" id="suId" value="${data.suId}">
                <br>
                <div class="form-group" >
                    <label for="sname">客户姓名：</label> <input type="text" class="form-control" id="sname" name="sname" placeholder="输入名字" value="${data.sname}">
                </div>
                <div class="form-group" >
                <label for="ssex">客户姓名：</label> <input type="text" class="form-control" id="ssex" name="ssex" placeholder="输入性别" value="${data.ssex}">
                </div>
                 <div class="form-group" >
                <label for="sage">客户年龄：</label> <input type="text" class="form-control" id="sage" name="sage" placeholder="输入名字" value="${data.sage}">
                </div>
                <div class="form-group">
                    <label for="sphone">客户电话</label> <input type="text" class="form-control" id="sphone" name="sphone" placeholder="输入电话号" value="${data.sphone}">
                </div>
                <div class="form-group">
                    <label for="scardId">身份证号</label> <input type="text" class="form-control" id="scardId" name="scardId" placeholder="输入身份证号" value="${data.scardId}">
                </div>
                <div class="form-group">
                    <label for="saddress">住址</label> <input type="text" class="form-control" id="saddress" name="saddress" placeholder="输入客户住址" value="${data.saddress}">
                </div>
        </form>
    <div class="form-group" style="padding-left: 60px">
        <button type="button" id="saveBtn" class="btn btn-success">提交</button>
        <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
    </div>
        <#include "/foot.html"><#--引入底部-->
</section>
</body>
</html>
<script>
    var updateUser = function() {
        if (!check().form()) {
            return;
        }
        $.ajax({
            type : 'POST',
            dataType : 'json',
            url : '/user/user_edit.do',
            data : $("#editUserForm").serialize(),
            success : function() {
                $("#cancelBtn").click();
            }
        });
    }

    $("#saveBtn").click(function() {
        updateUser();
    })

    $("#cancelBtn").click(function(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.getUserPageList();
        parent.layer.close(index);

    })

    function check() {
        return $("#editUserForm").validate({
            rules:{
                sname:{
                    required:true
                },
                sage:{
                    required:true
                },
                sphone:{
                    required: true,
                    number: true,
                    digits: true,
                    maxlength:11,
                    minlength:11
                },
                scardId:{
                    required: true,
                    number:true,
                    digits:true,
                    minlength:18,
                    maxlength:18
                },
                saddress:{
                    required:true
                }
            },
            messages:{
                sname:{
                    required:""
                },
                sage:{
                    required:""
                },
                sphone:{
                    required:""
                },
                scardId:{
                    required:""
                },
                saddress:{
                    required:""
                }
            }
        });
    }

</script>